<template>
    <dl @click="goDetail" :class="{'isOpen':isOpen}">
        <dt>
            <img :src="url" alt="">
        </dt>
        <dd>
            <h2>{{title}}</h2>
        </dd>
    </dl>
</template>
<script>
export default {
    props:['url','title','id','isOpen'],
    methods:{
        goDetail(){
            if(!this.isOpen){
                this.$emit('open',this.id);
            }
            this.$router.push({path:`/detail/${this.id}`})
        }
    }
}
</script>
<style scoped>
    img{
        width:80px;
    }
    .isOpen{
        color:gray;
    }
</style>

